Tabs, Used Right標籤頁最佳實踐

標籤頁（Tabs）是介面設計中的基礎控制元件，但您是否正確地使用它們呢？本文透過分析標籤頁的型別、設計原則及內容結構，為實現更好的可用性提供指導。

什麼是標籤頁 (What Are Tabs?)

標籤頁是一種控制元件，用於讓使用者選擇性檢視列表中的一個內容面板。一個典型的標籤頁設計包含以下元素：

選項卡透過組織和隱藏內容，直到使用者請求時才顯示，從而簡化了介面。經典的選項卡樣式（頂部）讓人聯想到檔案櫃中的實體資料夾。現代的方法（底部）試圖透過減少或消除所選選項卡及其面板上的邊框線條，使選項卡更容易融入佈局中。
選項卡控制元件包含可用選項卡的列表、描述選項卡內容的簡短標籤、一個或多個標記所選選項卡的指示器以及僅顯示所選選項卡內容的面板。

點選標籤頁標籤後，對應的內容面板會顯示。

標籤頁透過隱藏未選中的內容，幫助簡化介面，同時提升導航效率。

何時使用標籤頁 (When to Use Tabs)

以下情況下適合使用標籤頁：

  1. 內容分組清晰：當較長的內容有明確分組時，標籤頁有助於將資訊塊化，減輕使用者認知負擔。
  1. 分組數量較少：標籤頁數量過多會增加互動成本，例如需要滾動或點選按鈕顯示更多標籤。
  1. 內容重要性不均：預設選中的標籤頁內容會得到更多注意，其餘內容應為輔助資訊。
  1. 內容可簡短命名：標籤頁標籤應簡潔明瞭，避免過長。
  1. 無需同時檢視多個內容：如果使用者需頻繁切換標籤比較資訊，則標籤頁可能增加操作負擔。

好的用例：Patagonia 網站中使用標籤頁組織商品分類，並提供滾動按鈕以檢視更多選項。

不好的用例：Google 的廣告管理介面使用標籤頁來整理廣告設定，但讓使用者難以全面檢視內容。

標籤頁與摺疊面板 (Tabs Versus Accordions)

摺疊面板（Accordions）與標籤頁類似，但適合內容較短的場景，例如FAQ，尤其在移動裝置上更高效。桌面端則推薦標籤頁，因為其更適合顯示較長內容和複雜佈局。

標籤頁的型別 (Types of Tabs)

標籤頁分為頁面內標籤頁（In-page Tabs）和導航標籤頁（Navigation Tabs）：

特性導航標籤頁頁面內標籤頁
內容範圍廣泛，不相關，頁面獨立範圍較窄，相關聯，內容相似
位置視口頂部或側邊（移動端底部）頁面佈局內嵌
滾動位置通常固定在頂部或底部很少固定
使用者期待跳轉到新頁面，載入可能有延遲留在當前頁面，切換內容即時顯示
預設狀態預設選中一個標籤，可能有例外必須選中一個標籤
雅虎財經：三層導航標籤揭示了幾個層次的資訊架構（財經、影片和影片子類別）。市場和計劃列表容器中的頁面內標籤使使用者能夠在原地檢視內容型別。

不要混用標籤頁型別 (Don’t Mix and Match Tab Types)

將導航標籤頁與頁面內標籤頁混用會讓使用者感到困惑。例如，San Diego Wildlife Alliance 的頁面中，點選“Careers Home”跳轉至新頁面，而其他標籤保留在當前頁面。這種設計不一致性降低了使用者體驗。

❌ 不幸的是，在聖地亞哥野生動物聯盟職業資訊頁面上發現的這個選項卡控制元件將導航和頁面內選項卡混合在一起。這些選項卡中的大多數使使用者停留在視覺上一致的頁面上，展示了不同的職業細節。然而，“職業之家”選項卡是個例外。點選它會導致進入一個沒有選項卡的不同頁面。這種設計不可預測，可能會妨礙使用者瞭解該網站的組織結構
✅谷歌財經：此頁面展示了頁面內標籤的經典實現方式。它使用兩個頁面內標籤列表來實現視覺化金融市場表現的折線圖。第一個頁面內標籤列表顯示特定的市場類別（在本例中，選擇的是美國），第二個標籤列表顯示時間範圍（所選的是 1D——1 天）。當使用者切換標籤時，各個標籤始終如一地以折線圖形式顯示不同的資料，並且使用者仍停留在同一頁面上
❌Behance.com：此頁面內的選項卡中有一個“僱傭創意人員”選項卡，其外觀和功能與其他選項卡不同；點選它會在新的瀏覽器選項卡中開啟一個不同的網站。新增的圖示試圖傳達這種功能差異，但此控制元件是一個偽裝成選項卡的連結，不應作為選項卡控制元件的一部分。

標籤頁的視覺設計最佳實踐 (Tab Visual Design: Best Practices)

明確顯示選中標籤：透過背景顏色、下劃線、字型樣式等多種方式區分選中狀態。

例如，Crate & Barrel 使用背景填充和字型顏色的對比來指示選中狀態。
❌ CNN：所選的導航標籤（在本例中為“科技”）被加粗了，但效果非常細微，幾乎與其他標籤難以區分。

未選中標籤需清晰可見：低對比度或隱藏的標籤可能導致使用者忽略其他選項。

❌ MongoDB：幾個導航標籤控制元件被用於組織複雜的技術內容。不幸的是，未選中標籤（如“概述”和“依賴項”）的字型樣式與白色背景的顏色對比度較差，可能會被誤認為是不可選的功能。

連線選中標籤與面板：透過背景填充或位置接近感，確保標籤與內容面板的關係直觀。

❌PaneraBread.com：在訂購流程中發現的此標籤與其面板連線不佳。黃色的配送標籤、大量的填充以及全寬線條都使配送標籤與其面板分離且脫節。
✅ macOS：這些用於組織觸控板行為的頁面內標籤與其面板沒有共用一個共同區域，但儘管它們的背景填充不同，仍保持著接近性。

避免多行標籤列表：多行設計可能讓使用者難以理解選中狀態的具體位置。

❌ 亞馬遜：2000 年亞馬遜網站上的這些導航標籤是一個經典示例，說明瞭堆疊標籤存在的問題。點選後排的一個標籤（例如“廚房”）會導致一個艱難的設計權衡：在其後排位置突出顯示該標籤，但使其與面板斷開連線，或者將標籤移到前排以提高其鄰近性，但會重新排列標籤列表的順序？從可用性的角度來看，這兩個選項都是不理想的

將標籤列表放置在面板上方：垂直或底部佈局可能導致使用者忽略標籤。

https://prod-files-secure.s3.us-west-2.amazonaws.com/accdac59-4733-4d17-b0e9-c8fc0a5b36b5/4c0972ee-5d79-4c18-902c-d4c47b25bbb4/okta.mp4
❌Okta：這些過度設計的頁面內標籤違反了多項最佳實踐。標籤位於內容面板的右側，而不是頂部。所選標籤僅透過文字顏色的細微變化來區分。沒有清晰的面板，因為影象和文字相距甚遠。標籤名稱很長。藍色線條在不同標籤之間等距分佈，使得區分所選標籤變得困難。更糟糕的是——藍色線條是動態的，幾秒鐘後會自動選擇下一個標籤！

✅ 先鋒：這些簡單執行的頁面內選項卡直接位於其面板上方。

標籤頁內容的最佳實踐 (Tab Content: Best Practices)

A 按使用頻率排列內容：將高頻內容放在首個標籤並設為預設。

✅ SpotHero 移動應用程式：此頁面內的標籤按狀態組織停車位預訂。即將到來的預訂標籤被恰當地排在首位，並預設被選中，因為使用者可能對即將到來的停車預訂互動最感興趣。過去或已取消的預訂可供參考。

B 邏輯分組內容：根據使用者的理解方式組織標籤內容，避免標籤設計過於複雜。

C 標籤命名描述性強：用明確的語言標識內容，避免使用含糊或品牌化的術語。

❌ 《綜藝》：頁面內的標籤列表對近期評論進行了整理和預覽。電影、電視和音樂是簡短且明顯的標籤，但只有《綜藝》的現有讀者才會知道“Legit”這個標籤代表的是戲劇作品的評論。這個品牌詞的資訊氣味較弱，可能使用者參與度也較低。

D 標籤名簡潔明瞭：一般控制在1-2個詞，避免使用全大寫字型，因為這會降低可讀性。

E Make Tab Features Findable使標籤功能易於發現

如果分析發現某些頁面上的標籤頁使用率較低，可以檢查是否違反了最佳實踐。是否進行了無障礙最佳化，例如支援鍵盤導航、高對比度焦點顯示及ARIA角色設定。

❌ Microsoft Excel for Microsoft 365：要訪問與選項卡相關的命令，例如重新命名或刪除工作表（即選項卡），需要知道右鍵單擊選項卡會在選單中顯示這些選項，這對於新手使用者來說可能很難找到。
✅ Google Sheets：選項卡的拆分按鈕暗示有其他命令可用。點選選項卡的箭頭按鈕會顯示與選項卡相關的命令（不幸的是，這個箭頭按鈕缺乏一個清晰的視覺標識：只有當遊標懸停在其上時，按鈕邊框才會顯示）。右鍵單擊選項卡是開啟此選單的另一種方式。